<template>
  <DraggableCascader
    v-if="state.activeData._config_.goodKey === 'cascader'"
    v-model="state.activeData._config_.defaultValue"
    :active-data="state.activeData"
  />
  <DraggableInput
    v-else-if="state.activeData._config_.goodKey === 'comInput'"
    v-model="state.activeData._config_.defaultValue"
    :active-data="state.activeData"
  />
  <DraggableSelect
    v-else-if="state.activeData._config_.goodKey === 'select'"
    v-model="state.activeData._config_.defaultValue"
    :active-data="state.activeData"
  />
  <DraggableRadioGroup
    v-else-if="state.activeData._config_.goodKey === 'radio'"
    v-model="state.activeData._config_.defaultValue"
    :active-data="state.activeData"
  />
  <DraggableCheckGroup
    v-else-if="state.activeData._config_.goodKey === 'checkbox'"
    v-model="state.activeData._config_.defaultValue"
    :active-data="state.activeData"
  />
  <DraggableButton
    v-else-if="state.activeData._config_.goodKey === 'button'"
    v-model="state.activeData._config_.defaultValue"
    :active-data="state.activeData"
  />
  <DraggableText
    v-else-if="state.activeData._config_.goodKey === 'text'"
    v-model="state.activeData._config_.defaultValue"
    :active-data="state.activeData"
  />
  <vNode v-else v-model="state.activeData._config_.defaultValue" />
</template>
<script setup lang="ts" name="DraggableStandaloneItem">
import { computed, reactive, h } from "vue";
import { deepClone } from "@/components/Form/utils";
import {
  ElInput,
  ElSelect,
  ElSwitch,
  ElInputNumber,
  ElRadioGroup,
  ElCheckboxGroup,
  ElTimePicker,
  ElDatePicker,
  ElRate,
  ElColorPicker,
  ElDivider,
  ElSlider,
  ElText
} from "element-plus";

import DraggableCascader from "@/components/Form/DraggableComponents/StandaloneItem/DraggableCascader.vue";
import DraggableInput from "@/components/Form/DraggableComponents/StandaloneItem/DraggableInput.vue";
import DraggableSelect from "@/components/Form/DraggableComponents/StandaloneItem/DraggableSelect.vue";
import DraggableRadioGroup from "@/components/Form/DraggableComponents/StandaloneItem/DraggableRadioGroup.vue";
import DraggableCheckGroup from "@/components/Form/DraggableComponents/StandaloneItem/DraggableCheckGroup.vue";
import DraggableButton from "@/components/Form/DraggableComponents/StandaloneItem/DraggableButton.vue";
import DraggableText from "@/components/Form/DraggableComponents/StandaloneItem/DraggableText.vue";

const props = defineProps({
  activeData: {
    type: Object,
    default: () => {
      {
      }
    }
  },
  index: Number,
  drawingList: {
    type: Array,
    default: () => []
  },
  activeId: Number,
  formConf: {
    type: Object,
    default: null
  }
});

const state = reactive({
  activeData: {} as any,
  dataObject: {
    class: {},
    props: {},
    on: {},
    style: {},
    slot: null,
    key: null,
    ref: null
  }
});
const propsData = toRef(props);
state.activeData = propsData.value.activeData;

const dynamicComponents = {
  "el-input": ElInput,
  "el-switch": ElSwitch,
  "el-input-number": ElInputNumber,
  "el-select": ElSelect,
  "el-radio-group": ElRadioGroup,
  "el-checkbox-group": ElCheckboxGroup,
  "el-cascader": "change",
  "el-time-picker": ElTimePicker,
  "el-date-picker": ElDatePicker,
  "el-rate": ElRate,
  "el-color-picker": ElColorPicker,
  "el-divider": ElDivider,
  "el-slider": ElSlider,
  "el-text": ElText
};

const buildDataObject = (confClone: any, dataObject: any) => {
  //const goodKey = confClone._config_.goodKey
  Object.keys(confClone).forEach(key => {
    const val = confClone[key];

    if (dataObject[key] !== undefined) {
      if (
        dataObject[key] === null ||
        dataObject[key] instanceof RegExp ||
        ["boolean", "string", "number", "function"].includes(typeof dataObject[key])
      ) {
        dataObject[key] = val;
      } else if (Array.isArray(dataObject[key])) {
        dataObject[key] = [...dataObject[key], ...val];
      } else {
        dataObject[key] = { ...dataObject[key], ...val };
      }
    } else {
      dataObject[key] = val;
    }
  });

  // 清理属性
  clearAttrs(dataObject);
};

function clearAttrs(dataObject: any) {
  delete dataObject._config_;
  delete dataObject.slot;
  delete dataObject.vModel;
}
let vNode = computed(() => {
  const confClone = deepClone(state.activeData);
  const dataObject = deepClone(state.dataObject);
  buildDataObject(confClone, dataObject);
  const component = dynamicComponents[state.activeData._config_.tag];
  return h(component, dataObject);
});
const emits = defineEmits(["updateActiveData"]);
watch(
  () => state.activeData,
  val => {
    emits("updateActiveData", val);
  }
);
</script>
